import React from 'react';
// 导入发布评论组件
import CmtPost from './CmtPost';
// 导入评论组件
import CmtItem from './CmtItem';

// prop-types
import PropTypes from 'prop-types';
export default class CmtList extends React.Component {
    static defaultProps={
        commentList:PropTypes.array.isRequired,
        addComment:PropTypes.func.isRequired,
        delComment:PropTypes.func.isRequired,
        getCmtListAsync:PropTypes.func.isRequired
    }
    constructor(props) {
        super(props);
        this.state = {  
        }
    }
    componentWillMount(){
        // 调用异步action,请求默认列表
        this.props.getCmtListAsync();
    }
    render() {
        return <div className="container">
            <h1>评论管理-redux版</h1>
            <hr/>
            {/* 发布评论组件 */}
            <CmtPost {...this.props}></CmtPost>
            <ul className="list-group">
                {/* 评论单项组件 */}
                {this.props.commentList.map((item)=>(
                    <CmtItem {...item} {...this.props} key={item.id}></CmtItem>
                ))}
            </ul>
            
        </div>
    }
}